<template>
	<el-dialog v-model="visible" title="物流轨迹" width="800px" :close-on-click-modal="false" @close="close">
		<div v-loading="loading">
			<!-- 快递公司信息 -->
			<div class="company-info" v-if="traceData.name">
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="info-item">
							<label>快递公司：</label>
							<span>{{ traceData.name }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label>运单号：</label>
							<span>{{ traceData.waybill }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label>客服电话：</label>
							<span>{{ traceData.phone }}</span>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20" v-if="traceData.take_time">
					<el-col :span="8">
						<div class="info-item">
							<label>取件用时：</label>
							<span>{{ traceData.take_time }}</span>
						</div>
					</el-col>
					<el-col :span="8" v-if="traceData.courier">
						<div class="info-item">
							<label>快递员：</label>
							<span>{{ traceData.courier }}</span>
						</div>
					</el-col>
					<el-col :span="8" v-if="traceData.courier_phone">
						<div class="info-item">
							<label>快递员电话：</label>
							<span>{{ traceData.courier_phone }}</span>
						</div>
					</el-col>
				</el-row>
			</div>

			<!-- 物流轨迹列表 -->
			<div class="trace-list" v-if="traceData.list && traceData.list.length > 0">
				<h4>物流轨迹</h4>
				<el-timeline>
					<el-timeline-item
						v-for="(item, index) in traceData.list"
						:key="index"
						:timestamp="item.AcceptTime"
						placement="top"
						:type="index === 0 ? 'primary' : ''"
					>
						<div class="trace-item">
							<div class="trace-content">{{ item.AcceptStation }}</div>
						</div>
					</el-timeline-item>
				</el-timeline>
			</div>

			<!-- 无轨迹数据提示 -->
			<div v-if="!loading && (!traceData.list || traceData.list.length === 0)" class="no-data">
				<el-empty description="暂无物流轨迹信息" />
			</div>
		</div>

		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	name: 'expressTrace',
	data() {
		return {
			visible: false,
			loading: false,
			traceData: {},
			orderData: {}
		}
	},
	methods: {
		// 打开弹窗
		open() {
			this.visible = true
			return this
		},
		// 设置数据
		setData(row) {
			this.orderData = row
			this.loadTraceData()
		},
		// 加载物流轨迹数据
		async loadTraceData() {
			if (!this.orderData.waybill) {
				this.$message.warning('运单号不存在')
				return
			}

			// 获取快递公司代码，支持多种可能的字段名
			let companyCode = this.orderData.code || 
							   this.orderData.company_code || 
							   this.orderData.kuaidicom

			// 如果没有代码，根据公司名称映射
			if (!companyCode && this.orderData.company_name) {
				companyCode = this.mapCompanyNameToCode(this.orderData.company_name)
			}

			// 如果还是没有，使用默认值
			if (!companyCode) {
				companyCode = 'YTO' // 默认圆通
			}

			this.loading = true
			try {
				// 使用正确的API调用方式
				let res
				
				// 首先尝试 press.trace
				if (this.$API.press?.trace) {
					try {
						res = await this.$API.press.trace.get({
							waybill: this.orderData.waybill,
							code: companyCode
						})
					} catch (error) {
						console.log('press.trace 接口失败:', error)
					}
				}
				
				// 如果上面失败，尝试 order.express.trace
				if (!res && this.$API.order?.express?.trace) {
					try {
						res = await this.$API.order.express.trace.get({
							waybill: this.orderData.waybill,
							code: companyCode
						})
					} catch (error) {
						console.log('order.express.trace 接口失败:', error)
					}
				}

				if (res && res.code === 200) {
					this.traceData = res.data
				} else {
					this.$message.error(res?.msg || '获取物流轨迹失败')
				}
			} catch (error) {
				console.error('获取物流轨迹失败:', error)
				this.$message.error('获取物流轨迹失败: ' + error.message)
			} finally {
				this.loading = false
			}
		},
		// 根据快递公司名称映射代码
		mapCompanyNameToCode(companyName) {
			if (!companyName) return null
			
			const companyMap = {
				'圆通': 'YTO',
				'圆通速递': 'YTO',
				'申通': 'STO',
				'申通快递': 'STO',
				'中通': 'ZTO',
				'中通快递': 'ZTO',
				'韵达': 'YTO',
				'韵达快递': 'YTO',
				'顺丰': 'SF',
				'顺丰速运': 'SF',
				'顺丰快递': 'SF',
				'京东': 'JD',
				'京东物流': 'JD',
				'德邦': 'DBL',
				'德邦快递': 'DBL',
				'极兔': 'J&T',
				'极兔速递': 'J&T',
				'百世': 'BEST',
				'百世快递': 'BEST',
				'EMS': 'EMS',
				'中国邮政': 'EMS',
				'邮政': 'EMS'
			}
			
			// 模糊匹配
			for (const [name, code] of Object.entries(companyMap)) {
				if (companyName.includes(name)) {
					return code
				}
			}
			
			return null
		},
		// 获取快递公司代码
		getCompanyCode() {
			let companyCode = this.orderData.code || 
							   this.orderData.company_code || 
							   this.orderData.kuaidicom

			if (!companyCode && this.orderData.company_name) {
				companyCode = this.mapCompanyNameToCode(this.orderData.company_name)
			}

			if (!companyCode) {
				companyCode = 'YTO' // 默认圆通
			}
			return companyCode
		},
		// 关闭弹窗
		close() {
			this.visible = false
			this.traceData = {}
			this.orderData = {}
			this.$emit('closed')
		}
	}
}
</script>

<style scoped>
.company-info {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.info-item {
	margin-bottom: 10px;
}

.info-item label {
	font-weight: bold;
	color: #606266;
	margin-right: 8px;
}

.info-item span {
	color: #303133;
}

.trace-list h4 {
	margin: 20px 0 15px 0;
	color: #303133;
	font-size: 16px;
}

.trace-item {
	padding: 10px 0;
}

.trace-content {
	color: #606266;
	line-height: 1.6;
}

.no-data {
	text-align: center;
	padding: 40px 0;
}

:deep(.el-timeline-item__node--primary) {
	background-color: #409eff;
}

:deep(.el-timeline-item__timestamp) {
	color: #909399;
	font-size: 13px;
}
</style>
